<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>商品分类 - 企业福利商城</title>
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
    }

    body {
      background-color: #f5f7fa;
      color: #333;
    }

    /* 顶部导航栏 */
    .header {
      background-color: white;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      position: sticky;
      top: 0;
      z-index: 1000;
    }

    .nav-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      height: 60px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .logo {
      display: flex;
      align-items: center;
    }

    .logo-icon {
      width: 36px;
      height: 36px;
      background: linear-gradient(135deg, #409EFF 0%, #64b5ff 100%);
      border-radius: 8px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 10px;
      color: white;
      font-weight: bold;
      font-size: 18px;
    }

    .logo-text {
      font-size: 20px;
      font-weight: 600;
      color: #409EFF;
    }

    .main-nav {
      display: flex;
      list-style: none;
      height: 100%;
    }

    .nav-item {
      padding: 0 20px;
      height: 100%;
      display: flex;
      align-items: center;
      cursor: pointer;
      position: relative;
      font-weight: 500;
    }

    .nav-item.active {
      color: #409EFF;
    }

    .nav-item.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 3px;
      background-color: #409EFF;
    }

    .user-info {
      display: flex;
      align-items: center;
    }

    .balance {
      margin-right: 20px;
      display: flex;
      align-items: center;
      background-color: #f0f9ff;
      padding: 6px 12px;
      border-radius: 16px;
      color: #409EFF;
      font-weight: 500;
    }

    .balance-icon {
      margin-right: 5px;
    }

    .avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background-color: #409EFF;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      font-weight: bold;
      cursor: pointer;
    }

    /* 主要内容区域 */
    .main-container {
      max-width: 1200px;
      margin: 20px auto;
      padding: 0 20px;
      display: flex;
    }

    /* 侧边分类导航 */
    .sidebar {
      width: 220px;
      background-color: white;
      border-radius: 12px;
      padding: 20px 0;
      margin-right: 20px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      align-self: flex-start;
    }

    .sidebar-title {
      padding: 0 20px 15px;
      font-weight: 600;
      border-bottom: 1px solid #f0f0f0;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
    }

    .sidebar-title-icon {
      width: 20px;
      height: 20px;
      background-color: #409EFF;
      border-radius: 4px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 8px;
      color: white;
      font-size: 12px;
    }

    .category-menu {
      list-style: none;
    }

    .category-item {
      padding: 12px 20px;
      cursor: pointer;
      transition: all 0.3s;
      display: flex;
      align-items: center;
    }

    .category-item:hover {
      background-color: #f5f7fa;
      color: #409EFF;
    }

    .category-item.active {
      background-color: #f0f9ff;
      color: #409EFF;
      border-right: 3px solid #409EFF;
    }

    .category-icon {
      margin-right: 10px;
      font-size: 16px;
    }

    /* 内容区域 */
    .content {
      flex: 1;
    }

    /* 面包屑导航 */
    .breadcrumb {
      background-color: white;
      border-radius: 12px;
      padding: 15px 20px;
      margin-bottom: 20px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      display: flex;
      align-items: center;
    }

    .breadcrumb-item {
      color: #606266;
      font-size: 14px;
    }

    .breadcrumb-item.active {
      color: #409EFF;
    }

    .breadcrumb-separator {
      margin: 0 8px;
      color: #c0c4cc;
    }

    /* 筛选区域 */
    .filter-section {
      background-color: white;
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .filter-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
    }

    .filter-title {
      font-weight: 600;
    }

    .filter-actions {
      display: flex;
      gap: 10px;
    }

    .filter-btn {
      background-color: white;
      border: 1px solid #dcdfe6;
      padding: 6px 12px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.3s;
    }

    .filter-btn.active {
      background-color: #409EFF;
      color: white;
      border-color: #409EFF;
    }

    .filter-content {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
    }

    .filter-group {
      display: flex;
      align-items: center;
    }

    .filter-label {
      margin-right: 8px;
      font-size: 14px;
      color: #606266;
    }

    .filter-options {
      display: flex;
      gap: 10px;
    }

    .filter-option {
      padding: 6px 12px;
      background-color: #f5f7fa;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.3s;
    }

    .filter-option.active {
      background-color: #409EFF;
      color: white;
    }

    /* 排序区域 */
    .sort-section {
      background-color: white;
      border-radius: 12px;
      padding: 15px 20px;
      margin-bottom: 20px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .sort-options {
      display: flex;
      gap: 15px;
    }

    .sort-option {
      padding: 6px 12px;
      background-color: #f5f7fa;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.3s;
    }

    .sort-option.active {
      background-color: #409EFF;
      color: white;
    }

    .view-options {
      display: flex;
      gap: 10px;
    }

    .view-btn {
      width: 36px;
      height: 36px;
      border-radius: 4px;
      background-color: #f5f7fa;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      transition: all 0.3s;
    }

    .view-btn.active {
      background-color: #409EFF;
      color: white;
    }

    /* 商品列表 */
    .product-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }

    .product-card {
      background-color: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      transition: all 0.3s;
    }

    .product-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    }

    .product-image {
      height: 180px;
      background-color: #f5f7fa;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #909399;
      font-size: 14px;
      position: relative;
    }

    .product-tag {
      position: absolute;
      top: 10px;
      left: 10px;
      background-color: #f56c6c;
      color: white;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;
    }

    .product-info {
      padding: 15px;
    }

    .product-name {
      font-weight: 500;
      margin-bottom: 8px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .product-desc {
      color: #909399;
      font-size: 13px;
      margin-bottom: 10px;
      height: 36px;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .product-price {
      color: #f56c6c;
      font-weight: 600;
      font-size: 18px;
      margin-bottom: 12px;
    }

    .product-actions {
      display: flex;
      justify-content: space-between;
    }

    .add-to-cart {
      background-color: #409EFF;
      color: white;
      border: none;
      padding: 6px 15px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 13px;
    }

    .favorite-btn {
      background-color: transparent;
      border: 1px solid #dcdfe6;
      padding: 6px 10px;
      border-radius: 4px;
      cursor: pointer;
      color: #606266;
    }

    /* 分页 */
    .pagination {
      display: flex;
      justify-content: center;
      margin-top: 30px;
    }

    .pagination-list {
      display: flex;
      list-style: none;
      background-color: white;
      border-radius: 12px;
      padding: 10px 20px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .pagination-item {
      width: 36px;
      height: 36px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 5px;
      cursor: pointer;
      border-radius: 4px;
      transition: all 0.3s;
    }

    .pagination-item.active {
      background-color: #409EFF;
      color: white;
    }

    .pagination-item:hover:not(.active) {
      background-color: #f5f7fa;
    }

    /* 底部信息 */
    .footer {
      background-color: white;
      padding: 30px 0;
      margin-top: 50px;
      border-top: 1px solid #e4e7ed;
    }

    .footer-content {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
    }

    .footer-logo {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
    }

    .footer-desc {
      color: #909399;
      max-width: 300px;
      line-height: 1.6;
    }

    .footer-links {
      display: flex;
    }

    .link-column {
      margin-right: 60px;
    }

    .link-title {
      font-weight: 600;
      margin-bottom: 15px;
    }

    .link-item {
      margin-bottom: 10px;
      color: #606266;
      cursor: pointer;
    }

    .link-item:hover {
      color: #409EFF;
    }

    .copyright {
      text-align: center;
      padding-top: 20px;
      margin-top: 20px;
      border-top: 1px solid #e4e7ed;
      color: #909399;
      font-size: 14px;
    }

    /* 响应式设计 */
    @media (max-width: 1024px) {
      .product-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media (max-width: 768px) {
      .main-container {
        flex-direction: column;
      }

      .sidebar {
        width: 100%;
        margin-right: 0;
        margin-bottom: 20px;
      }

      .product-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .filter-content {
        flex-direction: column;
        align-items: flex-start;
      }

      .filter-group {
        margin-bottom: 10px;
      }
    }

    @media (max-width: 480px) {
      .product-grid {
        grid-template-columns: 1fr;
      }

      .sort-section {
        flex-direction: column;
        align-items: flex-start;
      }

      .sort-options {
        margin-bottom: 15px;
        flex-wrap: wrap;
      }

      .nav-item {
        padding: 0 12px;
        font-size: 14px;
      }

      .balance {
        display: none;
      }
    }
  </style>
</head>
<body>
<!-- 顶部导航栏 -->
<header class="header">
  <div class="nav-container">
    <div class="logo">
      <div class="logo-icon">福</div>
      <div class="logo-text">企业福利商城</div>
    </div>

    <ul class="main-nav">
      <li class="nav-item">首页</li>
      <li class="nav-item active">商品分类</li>
      <li class="nav-item">福利卡兑换</li>
      <li class="nav-item">购物车</li>
      <li class="nav-item">个人中心</li>
    </ul>

    <div class="user-info">
      <div class="balance">
        <span class="balance-icon">¥</span>
        <span>1,280.50</span>
      </div>
      <div class="avatar">张</div>
    </div>
  </div>
</header>

<!-- 主要内容区域 -->
<div class="main-container">
  <!-- 侧边分类导航 -->
  <div class="sidebar">
    <div class="sidebar-title">
      <div class="sidebar-title-icon">分</div>
      全部分类
    </div>

    <ul class="category-menu">
      <li class="category-item active">
        <span class="category-icon">🍎</span>
        食品生鲜
      </li>
      <li class="category-item">
        <span class="category-icon">🏠</span>
        家居日用
      </li>
      <li class="category-item">
        <span class="category-icon">🛒</span>
        粮油调味
      </li>
      <li class="category-item">
        <span class="category-icon">🍵</span>
        休闲零食
      </li>
      <li class="category-item">
        <span class="category-icon">🎁</span>
        节日礼品
      </li>
      <li class="category-item">
        <span class="category-icon">🧴</span>
        个人护理
      </li>
      <li class="category-item">
        <span class="category-icon">👕</span>
        服装鞋帽
      </li>
      <li class="category-item">
        <span class="category-icon">📱</span>
        数码家电
      </li>
    </ul>
  </div>

  <!-- 内容区域 -->
  <div class="content">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <span class="breadcrumb-item">首页</span>
      <span class="breadcrumb-separator">/</span>
      <span class="breadcrumb-item">商品分类</span>
      <span class="breadcrumb-separator">/</span>
      <span class="breadcrumb-item active">食品生鲜</span>
    </div>

    <!-- 筛选区域 -->
    <div class="filter-section">
      <div class="filter-header">
        <div class="filter-title">筛选条件</div>
        <div class="filter-actions">
          <button class="filter-btn active">全部</button>
          <button class="filter-btn">新品</button>
          <button class="filter-btn">热销</button>
        </div>
      </div>

      <div class="filter-content">
        <div class="filter-group">
          <div class="filter-label">品牌:</div>
          <div class="filter-options">
            <div class="filter-option active">全部</div>
            <div class="filter-option">金龙鱼</div>
            <div class="filter-option">福临门</div>
            <div class="filter-option">中粮</div>
            <div class="filter-option">其他</div>
          </div>
        </div>

        <div class="filter-group">
          <div class="filter-label">价格:</div>
          <div class="filter-options">
            <div class="filter-option active">全部</div>
            <div class="filter-option">0-50元</div>
            <div class="filter-option">50-100元</div>
            <div class="filter-option">100元以上</div>
          </div>
        </div>

        <div class="filter-group">
          <div class="filter-label">包装:</div>
          <div class="filter-options">
            <div class="filter-option active">全部</div>
            <div class="filter-option">袋装</div>
            <div class="filter-option">瓶装</div>
            <div class="filter-option">盒装</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 排序区域 -->
    <div class="sort-section">
      <div class="sort-options">
        <div class="sort-option active">综合</div>
        <div class="sort-option">销量</div>
        <div class="sort-option">价格</div>
        <div class="sort-option">新品</div>
      </div>

      <div class="view-options">
        <div class="view-btn active">≡</div>
        <div class="view-btn">□</div>
      </div>
    </div>

    <!-- 商品列表 -->
    <div class="product-grid">
      <div class="product-card">
        <div class="product-image">
          <div class="product-tag">热销</div>
          商品图片
        </div>
        <div class="product-info">
          <div class="product-name">金龙鱼黄金比例食用调和油5L</div>
          <div class="product-desc">精选优质原料，科学配比，适合中式烹饪</div>
          <div class="product-price">¥ 89.90</div>
          <div class="product-actions">
            <button class="add-to-cart">加入购物车</button>
            <button class="favorite-btn">收藏</button>
          </div>
        </div>
      </div>

      <div class="product-card">
        <div class="product-image">
          <div class="product-tag">新品</div>
          商品图片
        </div>
        <div class="product-info">
          <div class="product-name">福临门水晶米10kg</div>
          <div class="product-desc">颗粒饱满，米香浓郁，家庭必备优质大米</div>
          <div class="product-price">¥ 68.50</div>
          <div class="product-actions">
            <button class="add-to-cart">加入购物车</button>
            <button class="favorite-btn">收藏</button>
          </div>
        </div>
      </div>

      <div class="product-card">
        <div class="product-image">
          商品图片
        </div>
        <div class="product-info">
          <div class="product-name">有机蔬菜礼盒</div>
          <div class="product-desc">新鲜有机蔬菜，产地直供，健康生活首选</div>
          <div class="product-price">¥ 78.00</div>
          <div class="product-actions">
            <button class="add-to-cart">加入购物车</button>
            <button class="favorite-btn">收藏</button>
          </div>
        </div>
      </div>

      <div class="product-card">
        <div class="product-image">
          商品图片
        </div>
        <div class="product-info">
          <div class="product-name">进口牛肉500g</div>
          <div class="product-desc">优质进口牛肉，肉质鲜嫩，营养丰富</div>
          <div class="product-price">¥ 58.00</div>
          <div class="product-actions">
            <button class="add-to-cart">加入购物车</button>
            <button class="favorite-btn">收藏</button>
          </div>
        </div>
      </div>

      <div class="product-card">
        <div class="product-image">
          商品图片
        </div>
        <div class="product-info">
          <div class="product-name">新鲜鸡蛋30枚</div>
          <div class="product-desc">农家散养鸡蛋，新鲜营养，每日早餐必备</div>
          <div class="product-price">¥ 32.80</div>
          <div class="product-actions">
            <button class="add-to-cart">加入购物车</button>
            <button class="favorite-btn">收藏</button>
          </div>
        </div>
      </div>

      <div class="product-card">
        <div class="product-image">
          <div class="product-tag">热销</div>
          商品图片
        </div>
        <div class="product-info">
          <div class="product-name">新鲜水果礼盒</div>
          <div class="product-desc">多种新鲜水果组合，营养均衡，送礼佳品</div>
          <div class="product-price">¥ 98.00</div>
          <div class="product-actions">
            <button class="add-to-cart">加入购物车</button>
            <button class="favorite-btn">收藏</button>
          </div>
        </div>
      </div>

      <div class="product-card">
        <div class="product-image">
          商品图片
        </div>
        <div class="product-info">
          <div class="product-name">海产大礼包</div>
          <div class="product-desc">精选优质海产品，多种海鲜组合，满足味蕾</div>
          <div class="product-price">¥ 128.00</div>
          <div class="product-actions">
            <button class="add-to-cart">加入购物车</button>
            <button class="favorite-btn">收藏</button>
          </div>
        </div>
      </div>

      <div class="product-card">
        <div class="product-image">
          商品图片
        </div>
        <div class="product-info">
          <div class="product-name">有机牛奶1L*6</div>
          <div class="product-desc">天然有机牧场，无添加，营养健康</div>
          <div class="product-price">¥ 68.00</div>
          <div class="product-actions">
            <button class="add-to-cart">加入购物车</button>
            <button class="favorite-btn">收藏</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <div class="pagination">
      <ul class="pagination-list">
        <li class="pagination-item">«</li>
        <li class="pagination-item active">1</li>
        <li class="pagination-item">2</li>
        <li class="pagination-item">3</li>
        <li class="pagination-item">4</li>
        <li class="pagination-item">5</li>
        <li class="pagination-item">»</li>
      </ul>
    </div>
  </div>
</div>

<!-- 底部信息 -->
<footer class="footer">
  <div class="footer-content">
    <div class="footer-about">
      <div class="footer-logo">
        <div class="logo-icon">福</div>
        <div class="logo-text">企业福利商城</div>
      </div>
      <p class="footer-desc">
        企业员工专属福利平台，通过"卡+卡密"兑换机制，为员工提供安全便捷的福利兑换服务。
      </p>
    </div>

    <div class="footer-links">
      <div class="link-column">
        <div class="link-title">购物指南</div>
        <div class="link-item">购物流程</div>
        <div class="link-item">会员介绍</div>
        <div class="link-item">常见问题</div>
      </div>

      <div class="link-column">
        <div class="link-title">配送方式</div>
        <div class="link-item">上门自提</div>
        <div class="link-item">快递配送</div>
        <div class="link-item">配送费用</div>
      </div>

      <div class="link-column">
        <div class="link-title">售后服务</div>
        <div class="link-item">退款说明</div>
        <div class="link-item">返修/退换货</div>
        <div class="link-item">取消订单</div>
      </div>

      <div class="link-column">
        <div class="link-title">关于我们</div>
        <div class="link-item">联系我们</div>
        <div class="link-item">隐私协议</div>
        <div class="link-item">用户协议</div>
      </div>
    </div>
  </div>

  <div class="copyright">
    © 2023 企业福利商城 版权所有 | 客服热线：400-123-4567
  </div>
</footer>

<script>
  // 交互功能
  document.addEventListener('DOMContentLoaded', function() {
    // 导航菜单点击效果
    const navItems = document.querySelectorAll('.nav-item');
    navItems.forEach(item => {
      item.addEventListener('click', function() {
        navItems.forEach(i => i.classList.remove('active'));
        this.classList.add('active');
      });
    });

    // 分类菜单点击效果
    const categoryItems = document.querySelectorAll('.category-item');
    categoryItems.forEach(item => {
      item.addEventListener('click', function() {
        categoryItems.forEach(i => i.classList.remove('active'));
        this.classList.add('active');

        // 更新面包屑导航
        const breadcrumbActive = document.querySelector('.breadcrumb .active');
        breadcrumbActive.textContent = this.textContent.trim();
      });
    });

    // 筛选按钮点击效果
    const filterBtns = document.querySelectorAll('.filter-btn');
    filterBtns.forEach(btn => {
      btn.addEventListener('click', function() {
        filterBtns.forEach(b => b.classList.remove('active'));
        this.classList.add('active');
      });
    });

    // 筛选选项点击效果
    const filterOptions = document.querySelectorAll('.filter-option');
    filterOptions.forEach(option => {
      option.addEventListener('click', function() {
        const parentGroup = this.closest('.filter-group');
        const groupOptions = parentGroup.querySelectorAll('.filter-option');
        groupOptions.forEach(opt => opt.classList.remove('active'));
        this.classList.add('active');
      });
    });

    // 排序选项点击效果
    const sortOptions = document.querySelectorAll('.sort-option');
    sortOptions.forEach(option => {
      option.addEventListener('click', function() {
        sortOptions.forEach(opt => opt.classList.remove('active'));
        this.classList.add('active');
      });
    });

    // 视图切换按钮
    const viewBtns = document.querySelectorAll('.view-btn');
    viewBtns.forEach(btn => {
      btn.addEventListener('click', function() {
        viewBtns.forEach(b => b.classList.remove('active'));
        this.classList.add('active');

        // 这里可以添加切换商品列表布局的逻辑
        if (this.textContent === '≡') {
          document.querySelector('.product-grid').style.gridTemplateColumns = 'repeat(4, 1fr)';
        } else {
          document.querySelector('.product-grid').style.gridTemplateColumns = 'repeat(2, 1fr)';
        }
      });
    });

    // 商品操作按钮
    const addToCartBtns = document.querySelectorAll('.add-to-cart');
    addToCartBtns.forEach(btn => {
      btn.addEventListener('click', function(e) {
        e.stopPropagation();
        alert('商品已加入购物车');
      });
    });

    const favoriteBtns = document.querySelectorAll('.favorite-btn');
    favoriteBtns.forEach(btn => {
      btn.addEventListener('click', function(e) {
        e.stopPropagation();
        this.textContent = this.textContent === '收藏' ? '已收藏' : '收藏';
      });
    });

    // 商品卡片点击跳转详情
    const productCards = document.querySelectorAll('.product-card');
    productCards.forEach(card => {
      card.addEventListener('click', function() {
        alert('跳转到商品详情页');
      });
    });

    // 分页点击效果
    const paginationItems = document.querySelectorAll('.pagination-item');
    paginationItems.forEach(item => {
      item.addEventListener('click', function() {
        if (this.textContent === '«' || this.textContent === '»') return;

        paginationItems.forEach(i => i.classList.remove('active'));
        this.classList.add('active');
      });
    });
  });
</script>
</body>
</html>
